<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert"
              v-if="baTable.table.remark"
              :title="baTable.table.remark"
              type="info"
              show-icon />
    <el-collapse v-model="activeNames"
                 class="cp">
      <el-collapse-item name="1">
        <template #title>
          <span>计算公式</span>
          <span class="tip">展开可查看公式</span>
        </template>
        <el-row type="flex"
                align="middle">
          <template v-for="(dom, i) in doms1"
                    :key="i">
            <el-tooltip effect="light"
                        placement="top"
                        popper-class="doms">
              <template #content>
                <span class="labels">{{ dom.content }}</span>
              </template>
              <el-button>{{ dom.label }}</el-button>
            </el-tooltip>
            <span class="fuhao"
                  v-if="i != doms1.length - 1">{{ i == 0 ? '=' : '+' }}</span>
          </template>
        </el-row>
        <el-row type="flex"
                align="middle">
          <template v-for="(dom, i) in doms2"
                    :key="i">
            <el-tooltip effect="light"
                        placement="top"
                        popper-class="doms">
              <template #content>
                <span class="labels">{{ dom.content }}</span>
              </template>
              <el-button>{{ dom.label }}</el-button>
            </el-tooltip>
            <span class="fuhao"
                  v-if="i != doms2.length - 1">{{ i == 0 ? '=' : i >= 3 ? '-' : '+' }}</span>
          </template>
        </el-row>
        <el-row type="flex"
                align="middle">
          <template v-for="(dom, i) in doms3"
                    :key="i">
            <el-tooltip effect="light"
                        placement="top"
                        popper-class="doms">
              <template #content>
                <span class="labels">{{ dom.content }}</span>
              </template>
              <el-button>{{ dom.label }}</el-button>
            </el-tooltip>
            <span class="fuhao">{{ i == 0 ? '=' : i == 3 ? '(' : i == 6 ? ')' : i == 1 || i == 2 ? '-' : '' }}</span>
          </template>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <!-- 表格顶部菜单 -->
    <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                 :quick-search-placeholder="t('Quick search placeholder', { fields: t('shop.shop.name') })">
      <template #shop>
        <el-select filterable
                   v-model="baTable.comSearch.form['shop_id']"
                   clearable>
          <el-option v-for="item in shop_arr"
                     :key="item.shop_id"
                     :label="item.shop_name"
                     :value="item.shop_id">
          </el-option>
        </el-select>
      </template>
      <template #month>
        <el-date-picker v-model="baTable.comSearch.form['date']"
                        type="month"
                        placeholder="选择月份"
                        value-format="YYYY-MM" />
      </template>
    </TableHeader>
    <div class="table-block"
         style="margin-top: 1px;">
    </div>
    <div class="table-title">店铺业绩</div>
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table show-summary
           sum-text="统计" />

  </div>
</template>

<script setup lang="ts">
import { ref, provide, reactive, onBeforeMount } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useI18n } from 'vue-i18n'
import { getShopList } from '/@/api/backend/common'

defineOptions({
    name: 'shop/dashboardshop',
})

const doms1 = [
    {
        label: '总成本',
        content: '总成本'
    },
    {
        label: '入库费',
        content: '0.082$*件数'
    },
    {
        label: '订单处理费',
        content: '0.5$*订单数'
    },
    {
        label: '分拣费',
        content: '0.5$*件数'
    },
    {
        label: '海外仓配送费',
        content: '用重量和邮编核算'
    },
    {
        label: '头程',
        content: '14.48¥*件数（将转换成美金）'
    },
    {
        label: '采购成本',
        content: '采购成本（运营填入系统）'
    },
    {
        label: '包装费',
        content: '0.15$*订单数（订单件数>=2时才会统计）'
    }
]
const doms2 = [
    {
        label: '面板销售额',
        content: '面板销售额'
    },
    {
        label: '订单销售额',
        content: '订单销售额'
    },
    {
        label: '平台折扣',
        content: '平台折扣'
    },
    {
        label: '运费折扣',
        content: '运费折扣'
    },
    {
        label: 'Taxes',
        content: '税费'
    },
    {
        label: '结算手续费',
        content: '结算手续费,收货15天之后才有'
    },
    {
        label: '退款',
        content: '退款金额'
    }
]
const doms3 = [
    {
        label: '实际盈利',
        content: '实际盈利'
    },
    {
        label: '面板销售额',
        content: '面板销售额'
    },
    {
        label: '面板广告费',
        content: '面板广告费'
    },
    {
        label: '总成本',
        content: '总成本'
    },
    {
        label: '订单数',
        content: '除开‘已取消’状态的所有订单'
    },
    {
        label: '件数',
        content: '统计所有SKU件数'
    },
    {
        label: '(>=2件)单量',
        content: '订单中SKU数>=2的所有订单'
    }
]
const tableData = ref([] as any[])
const { t } = useI18n()
const shop_arr = ref([] as any[])
const adminInfo = useAdminInfo()
const activeNames = ref('')
const optButtons = defaultOptButtons(['edit', 'delete'])
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}

const baTable = new baTableClass(
    new baTableApi('/shop/dashboardshop/'),
    {
        column: [
            // { type: 'selection', align: 'center', operator: false },
            {
                label: '店铺',
                prop:  'shop_id',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'shop',
                show: false
            },
            {   
                label: '店铺', 
                prop: 'shop_name', 
                align: 'center',
                operator: false
            },
            {
                label: '月份',
                prop:  'date',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'month',
                show: false
            },
            {   
                label: '订单数', 
                prop: 'count', 
                align: 'center',
                operator: false
            },
            {   
                label: '订单销售额', 
                prop: 'total_amount', 
                align: 'center',
                operator: false
            },
            {   
                label: '运费折扣', 
                prop: 'shipping_fee_platform_discount', 
                align: 'center',
                operator: false
            },
            {   
                label: '平台折扣', 
                prop: 'platform_discount', 
                align: 'center',
                operator: false
            },
            {   
                label: '税费', 
                prop: 'tax', 
                align: 'center',
                operator: false
            },
            {   
                label: '航运费', 
                prop: 'shipping_fee', 
                align: 'center',
                operator: false
            },
            {   
                label: '件数', 
                prop: 'nums', 
                align: 'center',
                operator: false
            },
            {   
                label: '海外仓运费$', 
                prop: 'storage_fees', 
                align: 'center',
                operator: false
            },
            {   
                label: '头程预估$', 
                prop: 'first_fees', 
                align: 'center',
                operator: false
            },
            {   
                label: '退款$', 
                prop: 'refund_subtotal', 
                align: 'center',
                operator: false
            },
            {   
                label: '面板销售额$', 
                prop: 'PanelSalesRevenue', 
                align: 'center',
                operator: false
            },
            {   
                label: '广告费$', 
                prop: 'advertising_spend', 
                align: 'center',
                operator: false
            },
            {   
                label: '采购成本$', 
                prop: 'ProcurementCostTotal', 
                align: 'center',
                operator: false
            },
            {   
                label: 'ROI', 
                prop: 'roi', 
                align: 'center',
                operator: false
            },
            {   
                label: '实际盈利$', 
                prop: 'ActualProfit', 
                align: 'center',
                operator: false
            },
            // {
            //     label: t('Operate'),
            //     align: 'center',
            //     width: '100',
            //     render: 'buttons',
            //     buttons: optButtons,
            //     operator: false,
            // },
        ],
        dblClickNotEditColumn: ['all']
    },
    {
        defaultItems: {
            status: '1',
        }
    }
)

provide('baTable', baTable)
baTable.mount()
baTable.getIndex()?.then(() => {
    const { PanelSalesRevenue, advertising_spend, refund_subtotal } = baTable.table.extend as any
    const obj:any = {
        PanelSalesRevenue,
        advertising_spend,
        refund_subtotal
    }
    tableData.value.push(obj)
})

const getShopArr = () => {
    getShopList().then(res => {
        if(res.data && res.data.list.length) {
            shop_arr.value = res.data.list
        }
    })
}

onBeforeMount(() => {
    getShopArr()
})

</script>

<style scoped lang="scss">
.labels{
    font-size: 14px;
}
.table-title{
   background: #fff;
   padding: 10px 12px;
   font-size: 16px;
}
:deep(.el-table__header .cell){
    white-space: normal !important;
}
:deep(.el-date-editor.el-input){
    width: var(--el-input-width);
}

.cp{
    .el-row{
        margin: 15px 0;
    }
    :deep(.el-collapse-item__header){
        position: relative;
        padding: 0 10px;
        font-size: 16px;
    }
    .tip{
        position: absolute;
        right: 6%;
        color: #888;
        font-size: 12px;
    }
    :deep(.el-collapse-item__content){
        padding: 0 10px 25px;
    }
    .fuhao{
        font-size: 16px;
        padding: 0 5px;
    }
    .ml-label{
        font-weight: bold;
        font-size: 16px;
        color: #f00;
    }
    .ml-input{
        width: 200px;
    }
}
</style>
